<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<title>Document</title>
	<style type="text/css">
      #box{
      	width: 600px;
      	margin: 0 auto;
      	margin-top: 100px;
      	border: 1px solid #f65;
      	height: 400px;
      }
      .sbox{
      	width: 100px;
      	height: 100px;
      	background: #666;
      	margin: 0 auto;
      }
	</style>
</head>
<body>
<div id="box">
	<input type="button" onclick="changeWidth()" value="变宽">
	<input type="button" onclick="changeHeight()" value="变高">
	<input type="button" onclick="changeColor()" value="变色">
	<input type="button" onclick="yc()" value="隐藏">	
    <input type="button" onclick="cz()" value="重置">
    <div class="sbox">
    	
    </div>
</div>
	
</body>
<script type="text/javascript">

   function changeWidth() {
   	var Osbox = document.getElementsByClassName("sbox");
   	Osbox[0].style.width = "200px";
   }
	function changeHeight() {
   	var Osbox = document.getElementsByClassName("sbox");
   	Osbox[0].style.height = "200px";
   }
   function changeColor() {
   	var Osbox = document.getElementsByClassName("sbox");
   	Osbox[0].style.backgroundColor = "#f65";
   }
   function yc() {
   	var Osbox = document.getElementsByClassName("sbox");
   	Osbox[0].style.display = "none";
   }
    function cz() {
   	var Osbox = document.getElementsByClassName("sbox");
   	Osbox[0].style.cssText = "";
   }
</script>
</html>